<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="datepicker/skin/WdatePicker.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .template {
            display: none;
        }
        
        div {
            padding: 30px 50px;
        }
        
        table,
        tr,
        tbody {
            width: 100%;
            text-align: center;
        }
        
        tr {
            display: flex;
            justify-content: space-between;
            line-height: 40px;
            height: 40px;
        }
        
        td,
        th {
            width: 170px;
            margin-bottom: 10px;
        }
        
        .add {
            position: absolute;
            right: 125px;
            top: 38px;
            background-color: pink;
            color: lightslategray;
        }
        
        button {
            width: 40px;
            height: 30px;
            line-height: 18px;
            text-align: center;
            border-radius: 5px;
        }
        
        .cut {
            background-color: red;
            color: white;
        }
        
        .change {
            background-color: chartreuse;
            color: darkslategray;
        }
        
        h3 {
            margin-bottom: 20px;
        }
        
        .layer {
            width: 100%;
            height: 100%;
            background-color: rgb(11, 11, 11);
            opacity: .3;
            position: fixed;
            z-index: 2;
        }
        
        .show {
            position: fixed;
            width: 400px;
            padding: 30px 20px;
            background-color: greenyellow;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
        }
        
        .a {
            display: none;
        }
        
        p {
            margin-bottom: 10px;
        }
        
        .add {
            width: 80px;
        }
        
        span {
            margin-right: 10px;
        }
        
        .foot {
            text-align: right;
            width: 330px;
        }
    </style>
</head>

<body>
    <div class="layer a b"></div>
    <div>
        <h3>学生管理系统</h3>
        <button class="add">+ 添加学生</button>
        <hr>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>籍贯</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="template">
                    <td class="id"></td>
                    <td class="name"></td>
                    <td class="age"></td>
                    <td class="sex"></td>
                    <td class="city"></td>
                    <td class="time"></td>
                    <td>
                        <button class="change">编辑</button>
                        <button class="cut">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="show a b">
        <p><span>姓名:</span><input class="inputName" type="text"></p>
        <p> <span>年龄:</span><input class="inputAge" type="text"></p>
        <p>
            <span>所在城市:</span>
            <select name="" id="province"></select>
            <select name="" id="city" class="selectCity"></select>
            <select name="" id="area"></select>
        </p>
        <p><span>性别:</span> <input class="inputSex" type="radio" name="sex" checked>男
            <input type="radio" name="sex">女</p>
        <p><span>入学时间:</span><input class="inputTime" onClick="WdatePicker()" type="text"></p>
        <p class="foot"><button class="affirm">确认</button> <button class="cancel">取消</button></p>
    </div>
    <script src="datepicker/WdatePicker.js"></script>
    <script src="jquery.min.js"></script>
    <script src="citys.js"></script>

    <script>
        let site = "http://10.35.170.92:8080"
        $.ajax({
            url: `${site}/getstudent`,
            success(data) {
                data.forEach(item => {
                    let newtr = $('.template').clone(true)
                    console.log(item)
                    newtr.find('.name').html(item.name);
                    newtr.find('.id').html(item.id);
                    newtr.find('.age').html(item.age);
                    newtr.find('.sex').html(item.sex === '1' ? "男" : "女");
                    newtr.find('.city').html(item.city);
                    newtr.find('.time').html(item.data);
                    newtr.appendTo($('tbody'));
                    newtr.removeClass('template');
                });
            }
        })
        $('.cut').click(function() {
            $.ajax({
                url: `${site}/cutstudent`,
                data: {
                    id: $(this).closest('tr').find('.id').html()
                },
                success(data) {
                    alert(data)
                }
            })
            $(this).closest('tr').remove()
        })

        $('.add').click(function() {
            $(".a").removeClass('a');
            $('.inputName').focus();
        })

        $('.affirm').click(function() {
            $(".b").addClass('a')

            $.ajax({
                url: `${site}/addstudent`,
                data: {
                    name: $('.inputName').val(),
                    age: $('.inputAge').val(),
                    city: $('.selectCity').val(),
                    sex: $('.inputSex')[0].checked ? 1 : 0,
                    data: $('.inputTime').val()
                },
                success(data) {
                    alert(data)
                }
            })
            history.go(0)
        })
        $('.cancel').click(function() {
            $(".b").addClass('a')
        })



        window.onkeydown = function(event) {
            if (event.keyCode === 13) {
                $('.affirm').click()

            }
            if (event.keyCode === 27) {
                $('.cancel').click()
            }
            console.log(event.keyCode)
        }
    </script>
</body>

</html>